<template>
  <div class="system-bg">
    <el-card class="user-card" shadow="hover">
      <div slot="header" class="card-header-vertical">
        <div class="header-title">家族管理</div>
        <div class="header-btn-group right">
          <el-button class="add-btn" type="primary" @click="onShowAdd">
            <i class="el-icon-plus"></i> 新增家族
          </el-button>
        </div>
      </div>
      <el-table :data="list" style="width:100%" class="user-table" highlight-current-row>
        <el-table-column prop="name" label="家族名称" />
        <el-table-column prop="description" label="简介" show-overflow-tooltip />
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button size="mini" class="edit-btn" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" class="delete-btn" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :total="total"
        :page-size="size"
        :current-page="current"
        @current-change="load"
        @size-change="handleSizeChange"
        layout="total, prev, pager, next, jumper, ->, sizes"
        :page-sizes="[10, 20, 50, 100]"
        class="user-pagination"
      />
    </el-card>
    <el-dialog :visible.sync="showAdd" title="新增家族" class="fade-dialog custom-dialog" :close-on-click-modal="false" width="700px">
      <el-form :model="form" label-width="90px" class="dialog-form">
        <el-form-item label="家族名称" label-width="90px" class="nowrap-label"><el-input v-model="form.name" /></el-form-item>
        <el-form-item label="简介" label-width="90px" class="nowrap-label"><el-input v-model="form.description" type="textarea" :rows="2" /></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAdd=false">取消</el-button>
        <el-button type="primary" @click="add">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showEdit" title="编辑家族" class="fade-dialog custom-dialog" :close-on-click-modal="false" width="700px">
      <el-form :model="form" label-width="90px" class="dialog-form">
        <el-form-item label="家族名称" label-width="90px" class="nowrap-label"><el-input v-model="form.name" /></el-form-item>
        <el-form-item label="简介" label-width="90px" class="nowrap-label"><el-input v-model="form.description" type="textarea" :rows="2" /></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEdit=false">取消</el-button>
        <el-button type="primary" @click="update">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getClanList, addClan, updateClan, deleteClan } from '@/api/clan';
export default {
  data() {
    return {
      list: [],
      total: 0,
      size: 10,
      current: 1,
      showAdd: false,
      showEdit: false,
      form: { id: null, name: '', description: '' },
      pages: 0 // 新增用于存储总页数
    };
  },
  created() { this.load(); },
  methods: {
    async load(page = 1) {
      this.current = page;
      try {
        const data = await getClanList({ page, size: this.size });
        this.list = data.records;
        this.total = data.total;
        this.size = data.size;
        this.current = data.current;
        this.pages = data.pages; // 可用于显示总页数
      } catch (e) {
        this.$message.error('加载家族列表失败');
      }
    },
    handleSizeChange(newSize) {
      this.size = newSize;
      this.load(1);
    },
    onShowAdd() {
      this.form = { name: '', description: '' };
      this.showAdd = true;
    },
    async add() {
      const { name, description } = this.form;
      try {
        await addClan({ name, description });
        this.$message.success('新增家族成功');
        this.showAdd = false;
        this.load();
      } catch (e) {
        this.$message.error('新增家族失败');
      }
    },
    edit(row) {
      this.form = { ...row };
      this.showEdit = true;
    },
    async update() {
      try {
        await updateClan(this.form);
        this.$message.success('编辑家族成功');
        this.showEdit = false;
        this.load();
      } catch (e) {
        this.$message.error('编辑家族失败');
      }
    },
    async remove(row) {
      try {
        await this.$confirm('确定要删除该家族吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        await deleteClan(row.id);
        this.$message.success('删除家族成功');
        this.load();
      } catch (e) {
        if (e !== 'cancel') {
          this.$message.error('删除家族失败');
        }
      }
    }
  }
};
</script>
<style scoped>
.system-bg {
  min-height: 80vh;
  background: linear-gradient(135deg, #f4f6fa 60%, #e0e7ff 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 0;
  animation: fadeIn 0.8s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px);}
  to { opacity: 1; transform: none;}
}
.user-card {
  width: 1100px;
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
  background: rgba(255,255,255,0.95);
  transition: box-shadow 0.3s;
}
.card-header-vertical {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 8px;
}
.header-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}
.header-btn-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.header-btn-group.right {
  justify-content: flex-end;
}
.header-btn-group .el-button {
  margin-right: 8px;
  height: 34px;
  font-size: 15px;
  padding: 0 18px;
  display: flex;
  align-items: center;
}
.header-btn-group .el-button:last-child {
  margin-right: 0;
}
.add-btn {
  background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
  border: none;
  color: #fff;
  font-weight: bold;
}
.add-btn:hover {
  background: linear-gradient(90deg, #fc5c7d 0%, #6a82fb 100%);
}
.user-table {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
}
.user-table ::v-deep .el-table__row:hover {
  background: #f0f7ff !important;
  transition: background 0.2s;
}
.edit-btn {
  background: #fff;
  border: 1px solid #6a82fb;
  color: #6a82fb;
  margin-right: 8px;
  transition: all 0.2s;
  min-width: 55px;
}
.edit-btn:hover {
  background: #6a82fb;
  color: #fff;
}
.delete-btn {
  background: #fff;
  border: 1px solid #fc5c7d;
  color: #fc5c7d;
  transition: all 0.2s;
}
.delete-btn:hover {
  background: #fc5c7d;
  color: #fff;
}
.user-pagination {
  margin-top: 18px;
  text-align: right;
}
.user-pagination ::v-deep .el-pager li {
  border-radius: 6px;
  transition: background 0.2s;
}
.user-pagination ::v-deep .el-pager li.active {
  background: #6a82fb;
  color: #fff;
}
.fade-dialog ::v-deep .el-dialog__wrapper {
  animation: fadeIn 0.4s;
}
.custom-dialog ::v-deep .el-dialog {
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  background: #fafdff;
  padding-bottom: 0;
}
.dialog-form {
  padding: 12px 0 0 0;
}
.dialog-form ::v-deep .el-form-item {
  margin-bottom: 22px;
}
.dialog-footer {
  text-align: right;
  padding: 8px 0 8px 0;
}
.dialog-footer .el-button {
  min-width: 80px;
  border-radius: 6px;
  font-weight: 500;
  margin-left: 8px;
}
.dialog-footer .el-button--primary {
  background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
  border: none;
}
.dialog-footer .el-button--primary:hover {
  background: linear-gradient(90deg, #fc5c7d 0%, #6a82fb 100%);
}
.nowrap-label ::v-deep .el-form-item__label {
  white-space: nowrap;
}
</style> 